<template>
    <CommonDetail title="平台账户信息" :noback="true">
        <!-- v-if="account" -->
        <div slot="header" class="header-title">
            <span>{{ businessName }}</span>
            <span class="content-wrapper">
                <el-popover placement="bottom-start" trigger="click" v-model="showCompanyPopover">
                    <i :class="[showCompanyPopover?'el-icon-caret-top':'el-icon-caret-bottom','icon1']" slot="reference"></i>
                    <div class="company-list">
                        <el-input v-model="inputValue" placeholder="请输入公司名称" @input="handleChangeCompany" clearable filterable>

                        </el-input>
                        <ul>
                            <template v-if="cptBusinessList.length"> 
                                <li v-for="item in cptBusinessList" :style="{backgroundColor:item.id==businessId?'rgba(2, 2, 2, .1)':''}" @click="handleClickCompany(item)">{{ item.name }}</li>
                            </template>
                            <template v-else>
                                <div style="text-align: center;">
                                    暂无数据
                                </div>
                            </template>
                        
                        </ul>
                    </div>


                </el-popover>

            </span>
        </div>
        <el-row class="head">
            <el-col :span="8">
                <div class="wrapper">
                    <div class="label">
                        总账户
                    </div>
                    <div class="value" style="background-color: #409EFF;">
                        ￥{{ account.totalAccount }}
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="wrapper">
                    <div class="label">
                        收益账户
                    </div>
                    <div class="value" style="background-color: #cf1150;">
                        ￥{{ account.profitAccount }}
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="wrapper">
                    <div class="label">
                        充值余额账户
                    </div>
                    <div class="value" style="background-color: #E6A23C;">
                        ￥{{ account.balanceAccount }}
                    </div>
                </div>

            </el-col>
            <el-col :span="8">
                <div class="wrapper">
                    <div class="label">
                        已用充值余额
                    </div>
                    <div class="value" style="background-color: #77d808;">
                        ￥{{ account.balanceAccountOut }}
                    </div>
                </div>

            </el-col>
            <el-col :span="8">
                <div class="wrapper">
                    <div class="label">
                        补贴账户
                    </div>
                    <div class="value" style="background-color: #4c7997;">
                        ￥{{ account.reserveAccount }}
                    </div>
                </div>

            </el-col>
            <el-col :span="8">
                <div class="wrapper">
                    <div class="label">
                        已用基础补贴
                    </div>
                    <div class="value" style="background-color: #6cf5c1;">
                        ￥{{ account.reserveAccountOut }}
                    </div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="wrapper">
                    <div class="label">
                        已用活动补贴
                    </div>
                    <div class="value" style="background-color: #747171;">
                        ￥{{ account.supplyAccountOut }}
                    </div>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <div class="platform-bill__top">
                <div class="platform-bill__title">
                    平台账户流水
                </div>
                <el-button type="danger" size="mini" @click="moreDate">
                    更多
                </el-button>
            </div>

            <el-table :data="list" :header-cell-style="{ 'background-color': '#F2F2F2', 'color': 'black' }">
                <el-table-column label="序号" type="index" align="center">

                </el-table-column>
                <el-table-column label="创建时间" prop="createDate" align="center" width="100">

                </el-table-column>
                <el-table-column label="订单编号" prop="orderNo" align="center">

                </el-table-column>
                <el-table-column label="账单类型" prop="type" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="formatBillTypes(scope.row.billType)" effect="dark" size="small">
                            {{ formatBillType(scope.row.billType) }}
                        </el-tag>


                    </template>
                </el-table-column>
                <el-table-column label="总金额" prop="amount" align="center">

                </el-table-column>
                <el-table-column label="平台所得" prop="platformGain" align="center">

                </el-table-column>
                <el-table-column label="平台支出" prop="platformPay" align="center">

                </el-table-column>
                <el-table-column label="商户所得" prop="businessGain" align="center">

                </el-table-column>
                <el-table-column label="商户支出" prop="businessPay" align="center">

                </el-table-column>
                <el-table-column label="服务员所得" prop="waiterGain" align="center">

                </el-table-column>
                <el-table-column label="服务员支出" prop="waiterPay" align="center">

                </el-table-column>
                <el-table-column label="用户所得" prop="userGain" align="center">

                </el-table-column>
                <el-table-column label="用户支出" prop="userPay" align="center">

                </el-table-column>
                <el-table-column label="推广员所得" prop="promoterGain" align="center">

                </el-table-column>
                <el-table-column label="推广员支出" prop="promoterPay" align="center">

                </el-table-column>
            </el-table>
        </el-row>
    </CommonDetail>
</template>

<script>
import PlatformAccountApi from "@/api/account/platformAccount"
import BusinessApi from "@/api/business/business";
export default {
    data() {
        return {
            account: {},
            list: [
            ],
            businessId:"",
            businessName:"",
            businessList:[],
            inputValue:"",
            showCompanyPopover:false,
        }
    },
    computed:{
        cptBusinessList(){
            return this.businessList.filter(item=>!item.state)
        }
    },
    mounted() {
        this.getBusinessList()
        PlatformAccountApi.getAccountData().then(res => {
            this.account = res.data.one || {}
            this.list = res.data.list
        })
    },
    methods: {
         // 获取商户列表
        getBusinessList() {
            BusinessApi.listIdNameVo({businessType:3}).then(res => {
                this.businessList = res.data
                this.businessId = res.data[0].id
                this.businessName = res.data[0].name
                this.getDataByBusiness()
            })
        },
        getDataByBusiness(){
            PlatformAccountApi.getDataByBusiness({businessId:this.businessId}).then((res)=>{
                this.account = res.data||{}
            })
        },
        handleClickCompany(val){
            this.businessId = val.id
            this.businessName = val.name
            this.showCompanyPopover = false
            this.getDataByBusiness()
        },
        handleChangeCompany(val){
            const {businessList} = this
            if(!val){
                businessList.forEach(item=>{
                    if(item.state){
                        this.$delete(item,'state')
                    }
                })
                return
            }
            this.businessList.forEach(item=>{
                if(item.name.includes(val)){
                    this.$delete(item,'state')
                }else{
                    this.$set(item,'state',1)
                }
            })
            
          },
        formatBillType(val) {
            switch (val) {
                case 1:
                    return "线上下单"
                case 10:
                    return "实体下单"
                case 20:
                    return "充值"
                case 30:
                    return "取消退款"

            }
        },
        formatBillTypes(val) {
            switch (val) {
                case 1:
                    return "success"
                case 10:
                    return ""
                case 20:
                    return "danger"
                case 30:
                    return "info"

            }
        },
        moreDate() {
            this.$router.push({
                path: "/account/platformBillManagement"
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.header-title {
    display: flex;
    align-items: center;
    font-weight: 800;
    font-size: 14px;
    padding-top: 2px;

    .content-wrapper {
        font-size: 25px;
        // width:20px;
        // height:20px;

        margin-left: 4px;

        .icon1 {
            background-color: rgba(10, 10, 10, .1);
                color: #f18d00;
        }

    }

}

.company-list {
    width: 327px;
    ul {
        list-style: none;
        padding-left: 1px;
        max-height: 400px;
        overflow: auto;
        li {
            margin-bottom: 5px;
            line-height: 32px;
            cursor:pointer;
            &:hover{
                background-color: rgba(1, 1, 1, .1);
            }
        }
    }

}

.head {
    font-size: 20px;

    .wrapper {
        display: flex;
        line-height: 60px;
        padding: 10px 0 16px 0;
        // min-width: 200px;
        font-weight: 900;

        .label {
            width: 130px;
        }

        .value {
            width: 200px;
            text-align: center;
            border-radius: 7px;
            font-size: 25px;
            color: white;
        }
    }
}

.title{
    font-size: 14px;
    font-weight: 800;
}
.platform-bill__top {
    display: flex;
    justify-content: space-between;
    padding: 30px 0 10px 0;

    .platform-bill__title {
        font-size: 14px;
        font-weight: 800;

    }
}


.el-table {
    border: 1px solid #E0E0E0;
    color: black;
    font-size: 12px;

    &::v-deep .el-table__cell {
        padding: 7px 0;
    }
}
</style>
